<template>
  <div id="grid">

    <div class="gridDiv">
      <ul class="gridUl grid-template-rows">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>

    <div class="gridDiv">
      <ul class="gridUl grid-template-columns">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>

    <div class="gridDiv">
      <ul class="gridUl grid-template-columns1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>

    <div class="gridDiv">
      <ul class="gridUl grid-template-columns2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>

    <div class="gridDiv">
      <ul class="gridUl grid-template-minmax">
        <li>1</li>
        <li>阿拉开始懂了速度快阿拉开始懂了速度快阿拉开始懂了速度快阿拉开始懂了速度快阿拉开始懂了速度快阿拉开始懂了速度快阿拉开始懂了速度快</li>
        <li>3</li>
        <li>阿拉开始懂速度快阿拉开始懂了速度快阿拉开始懂了速度快阿拉开始懂了速度快</li>
        <li>阿拉开始懂了速度快阿拉开始懂了速度快阿拉开始懂了速度快阿拉开始懂了速度快阿拉开始懂了速度快阿拉开始懂了速度快阿拉开始懂了速度快</li>
        <li>爱上大街上</li>
      </ul>
    </div>

    <div class="gridDiv">
      <ul class="gridUl grid-template-repeat">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>

    <div class="gridDiv">
      <ul class="gridUl grid-template-repeat2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'grid',
    data() {
      return {}
    },
    mounted() {

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>

  /*学习网址：https://mp.weixin.qq.com/s?__biz=MjM5NzE0MjQ2Mw==&amp;mid=2652493286&amp;idx=1&amp;sn=5884e5d22e01bbe68d0d7273ba160f15&amp;chksm=bd33ff368a447620f305489fb8fa956534ad558e82b4ed995457a05a7b7d0f17e82fc7fe6baa&amp;mpshare=1&amp;scene=1&amp;srcid=0526iFLkaFb7ZOuPIQfiNGNr#*/

  .gridDiv{
    margin-top: 30px;
  }

  .gridUl{
    display: grid;
  }

  .gridUl li{
    background-color: #00ADED;
    border: 1px solid #DCDCDC;
  }

  /*行*/
  .grid-template-rows{
    grid-template-rows: 50px 100px;
  }

  /*列*/
  .grid-template-columns{
    grid-template-columns: 90px 50px 120px;
  }

  .grid-template-columns1 {
    grid-template-columns: 1fr 1fr 2fr;
  }

  .grid-template-columns2{
    grid-template-columns: .5rem 20% 1fr 2fr;
  }

  /*可以通过minmax()函数来创建网格轨道的最小或最大尺寸。*/
  .grid-template-minmax {
    grid-template-rows: minmax(50px, auto);
    grid-template-columns: minmax(auto, 20%) 1fr 1em;
  }

  /*使用repeat()可以创建重复的网格轨道。*/
  .grid-template-repeat {
    grid-template-rows: repeat(2, 50px);
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-template-repeat2{
    grid-template-columns: 30px repeat(3, 1fr) 30px
  }

  /*间距*/
  .grid-gap {
    grid-row-gap: 5px;
    grid-column-gap: .1rem;
    /*grid-gap: 10px .1em;// 简写*/
  }

  /*通过网格线号码来定位网格项目*/
  .grid-area {
    /*grid-row-start: 2;*/
    /*grid-row-end: 3;*/
    /*grid-column-start: 2;*/
    /*grid-column-end: 3;*/

    grid-area: 2 / 2 / 3 / 3;
  }

  .grid-column-start-end {
    grid-column-start: 1;
    grid-column-end: 4;
  }

  .grid-row-start-end {
    grid-row-start: 1;
    grid-row-end: 4;
  }

  .grid-row-column {
    grid-row: 2 / 5;
    grid-column: 2 / 4;
  }

</style>
